<template>
<div class="rightContent">
    <div class="cr-container">
      <el-input v-model="Query.title" placeholder="search">
        <el-button v-if="Query.title.length > 0" slot="append" icon="el-icon-error" @click="clearRetrieveData"></el-button>
        <el-button slot="prepend" icon="el-icon-search" @click="retrieveData"></el-button>
      </el-input>
      <el-button type="primary" icon="el-icon-edit" style="margin-left: 20px" @click="createData">Create</el-button>
    </div>
    <el-table :data="courses" border style="width: 100%">
      <el-table-column prop="cou_id" label="cou_id"></el-table-column>
      <el-table-column prop="name" label="name"></el-table-column>
      <el-table-column prop="cou_no" label="cou_no"></el-table-column>
      <el-table-column prop="fac_id" label="fac_id"></el-table-column>
      <el-table-column prop="fac_name" label="fac_name"></el-table-column>
      <el-table-column prop="abbr" label="abbr"></el-table-column>
      <el-table-column fixed="right" label="action" width="200">
        <template slot-scope="scope">
          <el-button @click="updateData(scope.row)" type="primary" plain size="small">Edit</el-button>
          <el-button @click="deleteData(scope.row)" type="danger" plain size="small">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="temp" label-position="left" style="width: 80%" label-width="100px">
        <el-form-item label="cou_id">
            <el-input v-model="temp.cou_id" size="mini" place-holder="cou_id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="cou_no">
            <el-input v-model="temp.cou_no" size="mini" place-holder="cou_no" :disabled="getDialogStatus"></el-input>
        </el-form-item>
        <el-form-item label="cou_name">
            <el-input v-model="temp.name" size="mini" place-holder="name" :disabled="getDialogStatus"></el-input>
        </el-form-item>
        <el-form-item label="fac_id">
            <el-input v-model="temp.fac_id" size="mini" place-holder="fac_id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="fac_name">
            <el-select v-model="faculity" filterable placeholder="请选择" size='mini' :disabled="getDialogStatus">
              <el-option
                v-for="item in faculities"
                @click.native="handleFacSelected(item)"
                :key="item.fac_id"
                :label="item.fac_name"
                :value="item.fac_name">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="abbr">
            <el-input v-model="temp.abbr" size="mini" place-holder="abbr" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import urls from "../../utils/urls";
import http from "../../utils/http";
export default {
  data() {
    return {
      Query: {
        title: "",
      },
      // 课程列表
      courses: null,
      dialogFormVisible: false,
      temp: {
        cou_id:'',
        cou_no:"",
        name:"",
        fac_name:"",
        fac_id:"",
        abbr:""
      },
      dialogStatus: "",
      textMap: {
        update: "Edit",
        create: "Create",
        delete: "Delete",
      },
      // 学院列表
      faculities:null,
      // 学院
      faculity:'',
    };
  },
  computed: {
    getDialogStatus: function () {
      switch (this.dialogStatus) {
        case "create":
          return false;
          break;
        case "update":
          return false;
          break;
        case "delete":
          return true;
          break;
      }
    },
  },
  methods: {
    retrieveData() {
      this.getMajors(this.Query.title);
    },
    clearRetrieveData(){
      this.Query.title = '';
      this.majors = {}
      this.getMajors('');
    },
    createData() {
      // 显示dialog
      this.dialogFormVisible = true;
      // dialog是create类型
      this.dialogStatus = "create";
      // temp置空
      this.temp = {};
      // 学院置空
      this.faculity = ''
    },
    updateData(row) {
      // 显示dialog
      this.dialogFormVisible = true;
      // dialog是update类型
      this.dialogStatus = "update";
      // temp赋值为row
      this.temp = row;
    },
    deleteData(row) {
      // 显示dialog
      this.dialogFormVisible = true;
      // dialog是delete类型
      this.dialogStatus = "delete";
      // temp赋值为row
      this.temp = row;
    },
    handleCancel() {
      //关闭dialog
      this.dialogFormVisible = false;
      // dialog是空类型
      this.dialogStatus = "";
      // temp赋值为空
      this.temp = {};
      // 学院置空
      this.faculity = ''
    },
    handleConfirm() {
      // 创建更新和删除数据
      if (this.dialogStatus === "create") {
        this.handleCreateData();
      } else if (this.dialogStatus === "update") {
        this.handleUpdateData();
      } else if (this.dialogStatus === "delete") {
        this.handleDeleteData();
      }
    },
    handleCreateData() {
      var user = JSON.parse(localStorage.getItem("user"));
      var url = urls.BaseUrl + urls.MajorCreate;
      var data = {
        token: user.token,
        name: this.temp.name,
      };
      http.request(url, data, this.createSuccess);
    },
    handleUpdateData() {
      var user = JSON.parse(localStorage.getItem("user"));
      var url = urls.BaseUrl + urls.MajorUpdate;
      var data = {
        token: user.token,
        name: this.temp.name,
        id: this.temp.id,
      };
      http.request(url, data, this.createSuccess);
    },
    handleDeleteData() {
      var user = JSON.parse(localStorage.getItem("user"));
      var url = urls.BaseUrl + urls.CourseDelete;
      var data = {
        token: user.token,
        id: this.temp.cou_id,
      };
      http.request(url, data, this.deleteSuccess);
    },
    createSuccess() {
      this.dialogFormVisible = false;
      this.temp = {};
      this.getMajors("");
    },
    deleteSuccess(response) {
      this.dialogFormVisible = false;
      var that = this;
      var index = that.majors.findIndex((item) => {
        if (item.cou_id == that.temp.cou_id) {
          return true;
        }
      });
      that.courses.splice(index, 1);
      this.temp = {};
    },
    getCourses(name) {
      var user = JSON.parse(localStorage.getItem("user"));
      var url = urls.BaseUrl + urls.Courses;
      var data = {
        token: user.token,
        name: name,
        page_count: 0,
		    page_size: 10,
	      fac_id:0,
      };
      http.request(url, data, this.success);
    },
    success(response) {
      this.courses = response.Data;
      console.log(response.Data);
    },
    getFaculties(){        
      var user = JSON.parse(localStorage.getItem("user"));
      var url = urls.BaseUrl + urls.Faculties;
      var data = {
        token: user.token,
        fac_name:"",
        abbr:"",
        page_count:-1,
        page_size:10
      };
      http.request(url, data, this.getFacultiesSuccess);
    },    
    getFacultiesSuccess(response) {
      this.faculities = response.Data;
      console.log(this.faculities);
    },
    handleFacSelected(item){
      this.faculity = item.fac_name;
      this.temp.fac_name = item.fac_name;      
      this.temp.fac_id = item.fac_id;
      this.temp.abbr = item.abbr;      
      console.log(item);
    }
  },
  mounted() {
    this.getCourses();
    this.getFaculties();
  },
};
</script>
<style lang="less">
.cr-container {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  .el-input {
    width: 300px;
  }
  .el-input-group--apend {
    padding: 0;
  }
  .el-button {
    padding: 10px;
  }
}
.el-dialog__header {
  text-align: left;
}
.rightContent {
  padding: 10px;
}
</style>